<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        body{
            background:#ddd;
        }
        #canvas{
            margin:10px;
            background:#fff;
            border:thin inset #aaa;
        }
    </style>
    <script>
        onload=function(){
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');//d必须小写
            var w=canvas.width;
            var h=canvas.height;

            function drawGrid(step) {
                context.strokeStyle = 'lightgray';
                context.lineWidth = 0.5;
                for (var i = step; i < w; i += step) {
                    context.beginPath();
                    context.moveTo(i, 0);
                    context.lineTo(i, h);
                    context.stroke();
                }
                for (var i = step; i < h; i += step) {
                    context.beginPath();
                    context.moveTo(0, i);
                    context.lineTo(w, i);
                    context.stroke();
                }
            }
            drawGrid(10);

            context.font='48pt Helvetica';
            context.strokeStyle='blue';
            context.fillStyle='red';
            context.lineWidth='2';

            //Text.........................................
            context.strokeText('Stroke',60,110);

            context.fillText('Fill',440,110);

            context.strokeText('Stroke&Fill',650,110);
            context.fillText('Stroke&Fill',650,110);


            //Rect...........................................
            context.beginPath();
            context.rect(80,150,150,100);
            context.stroke();

            context.beginPath();
            context.rect(400,150,150,100);
            context.fill();

            context.beginPath();
            context.rect(750,150,150,100);
            context.stroke();
            context.fill();


            //Open Arc......................................
            context.beginPath();
            context.arc(150, 370, 60, 0, Math.PI*3/2);
            context.stroke();

            context.beginPath();
            context.arc(475, 370, 60, 0, Math.PI*3/2);
            context.fill();

            context.beginPath();
            context.arc(820, 370, 60, 0, Math.PI*3/2);
            context.stroke();
            context.fill();


            //Closed arcs..................................
            context.beginPath();
            context.arc(150, 550, 60, 0, Math.PI*3/2);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.arc(475, 550, 60, 0, Math.PI*3/2);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(820, 550, 60, 0, Math.PI*3/2);
            context.closePath();
            context.stroke();
            context.fill();

        }
    </script>
</head>
<body>
<canvas id='canvas' width='1050' height='700'>
    Canvas not supported!
</canvas>
</body>
</html>